<template>
	<div id="templ">
		<div id="postcomment">
			<h3>提交评论</h3>
			<p class="p"></p>
			<textarea placeholder="请输入您要评论的内容..." v-model="postcontent"></textarea>
			<mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
		</div>
		<div id="list">
			<h3>评论列表</h3>
			<p class="p"></p>
			<div class="mui-content" v-for= "(item,index) in list">
				<div class="title">
					<span>第{{index+1}}楼</span>
					<span>用户:{{item.user_name}}</span>
					<span>发表时间:{{item.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}}</span>
				</div>
				<ul class="mui-table-view">
				 	<li class="mui-table-view-cell">{{item.content}}</li>
				</ul>
			</div>
		</div>
		<mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
	</div>
	
</template>


<script>
	import "../../../static/mui/css/app.css"
	export default {
		data:function(){
			return{
				postcontent:"",
				list:[],
				pageindex:1
			}
		},
		methods:{
			postcomment:function(){
				if(this.postcontent.trim().length<=0) {
					this.Toast("请输入评论");
					return
				}
				var url = this.$common.apidomain+"/api/postcomment/"+this.id1;
				this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
					this.Toast(res.body.message);
					this.postcontent = "";
					var url1 = this.$common.apidomain+"/api/getcomments/"+this.id1+"?pageindex=1";
					this.$http.get(url1).then(function(res){
					this.list.unshift(res.body.message[0])
				})
				})
			},
			getcomments:function(){
				var url = this.$common.apidomain+"/api/getcomments/"+this.id1+"?pageindex="+this.pageindex;
				this.$http.get(url).then(function(res){
					this.list = res.body.message;
				})
			},
			getmore:function(){
				this.pageindex++;
				var url = this.$common.apidomain+"/api/getcomments/"+this.id1+"?pageindex="+this.pageindex;
				this.$http.get(url).then(function(res){
					 this.list.push.apply(this.list,res.body.message);
				})
			}
		},
		props:["id1"],
		created:function(){
			this.getcomments();
		}
	}


</script>



<style scoped>
#postcomment{
	padding: 5px;
}
	.p{
		height: 1px;
		width: 100%;
		border-bottom: 1px solid rgba(0,0,0,0.3);
	}
	.title{
				color: #6d6d72;
				font-size: 15px;
				line-height: 30px;
				padding-left: 10px;
				box-sizing: border-box;
			}

	.title>span {
		margin-right: 10px;
	}
</style>